<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .all{
            width: 60px;
            height: 60px;
            text-align: center;
            line-height: 60px;
            position: fixed;
            bottom: 50px;
            right: 30px;
            font-size: 15px;
            background-color: aqua;
            display: none;
            cursor: pointer;
        }
        .header {
            width: 100%;
            height: 100px;
            background-color: blueviolet;
            color: #fff;
        }
        .banner {
            width: 100%;
            height: 300px;
            background-color: rgb(163, 29, 132);
            color: #fff;
        }
        .main {
            width: 100%;
            height: 1000px;
            background-color: rgb(173, 144, 201);
            color: #fff;
        }
    </style>
    <script>
        var foc = document.getElementsByClassName('all');
        var banner = document.getElementsByClassName('banner');
        var main = document.getElementsByClassName('main');
        let timer = setTimeout(() => {
            // banner.offsetTop 被卷去头部的大小，一定要写在外面
            var bannerTop = banner[0].offsetTop;
            // 固定定位之后应该变化的数值
            var focTop = foc[0].offsetTop - bannerTop;
            var mainTop = main[0].offsetTop;
            // 页面滚动事件
            document.addEventListener('scroll', function() {
                // window.pageYOffset 页面被卷去的头部
                // 当页面被卷去的头部大于等于 172 时， 侧边栏就改为固定定位
                // if (window.pageYOffset >= bannerTop) {
                // 	foc.style.position = 'fixed';
                // 	foc.style.top = focTop + 'px';
                // } else {
                // 	foc.style.position = 'absolute';
                // 	foc.style.top = '300px';
                // }
                // 页面滚动到main盒子，就显示goback模块
                if (window.pageYOffset >= mainTop) {
                    foc[0].style.display = 'block';
                } else {
                    foc[0].style.display = 'none';
                }
            });
            // 3) 当我们点击了返回顶部模块，就让窗口滚动到页面的最上方
            foc[0].addEventListener('click', function() {
                // 是窗口滚动，所以对象是window
                animate(window, 0);
            });
            // 动画函数的封装 动画必须要定位 obj 目标对象 target 目标位置
            function animate(obj, target, callback) {
                // 如果不断点击，导致动画速度变快，因为开启太多的定时器，解决方案：让元素只有一个定时器执行
                // 先清除以前的定时器，只保留当前的一个定时器执行
                clearInterval(obj.timer);
                // 给不同的元素指定了不同的定时器
                /* 不用给timer开辟新的内存空间，而是使用的是obj的一个属行，这样做节省资源，提高性能*/
                obj.timer = setInterval(function() {
                    // 步长值写在定时器里面 步长公式：(目标值 - 现在的位置) / 10
                    var step = (target - window.pageYOffset) / 10;
                    // 小数要取整 才能保证盒子移动到整数目标位置
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                    if (window.pageYOffset == target) {
                        // 停止动画，本质是停止定时器
                        clearInterval(obj.timer);
                        // 回调函数一定写在定时器结束里面
                        callback&&callback();
                    }
                    // 盒子移动距离
                    // 把每次加1 这个步长值改为一个慢慢变小的值 
                    // obj.style.left = window.pageYOffset + 1 + 'px';
                    window.scroll(0, window.pageYOffset + step);
            
                }, 30);
            }
            clearTimeout(timer);
        })
        
    </script>
</head>

<body>
    <!-- 回到顶部 -->
    <div class="all">
        <span>回到顶部</span>
    </div>
    <div class="header">头部区域</div>
    <div class="banner">banner区域</div>
    <div class="main">主体部分</div>
    
</body>
</html>